<template>
  <view class="u-page"> 
	<view class="u-demo-block">
				<view class="u-demo-block__content">
					<view class="u-page__tag-item">
						<u-search v-model="searchKeyword"></u-search>
					</view>
				</view>
	</view>
	<u-list @scrolltolower="scrolltolower">
	      <u-list-item v-for="(item, index) in filteredList" :key="item.id" >
	        <u-cell-group>
			<u-cell :label="item.creator + ' ' + item.time"
				     title="item.name" :isLink="true" :url="`/pages/test/detail?action=edit&id=${item.id}`" >
	          <u-avatar
	            slot="icon"
	            shape="square"
	            size="35"
	            :src="item.url"
	            customStyle="margin: -3px 5px -3px 0"
	          ></u-avatar>
			  <<u-cell>
			<u--text type="primary" text="主色"></u--text>
			<u--text type="primary" text="主色"></u--text>
			</u-cell>
	        </u-cell>
			</u-cell-group>
	      </u-list-item>
	    </u-list>	
		
      <!-- <view class="list-item" v-for="(item, index) in filteredList" :key="item.id" @click="editItem(item)">
        <view class="item-title">{{item.name}}</view>
        <view class="item-info">
          <text>创建者：{{item.creator}}</text>
          <text>时间：{{item.time}}</text>
        </view>
        <view class="item-arrow">→</view>
      </view> -->

    
    <view class="add-btn" @click="addItem">
      <text>+</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      userList: [
        { id: '1', name: '测试数据1', creator: 'system', time: '2019-07-08 18:01' },
        { id: '2', name: '测试数据2', creator: 'system', time: '2019-07-08 19:49' },
        { id: '3', name: '测试数据3', creator: 'system', time: '2019-07-08 19:49' },
        { id: '4', name: '测试数据4', creator: 'system', time: '2021-04-19 15:11' },
        { id: '5', name: '测试数据5', creator: 'system', time: '2021-04-19 15:11' },
        { id: '6', name: '测试数据6', creator: 'system', time: '2021-04-19 15:12' },
        { id: '7', name: '测试数据7', creator: 'system', time: '2021-04-19 15:12' },
        { id: '8', name: '测试数据8', creator: 'system', time: '2021-04-19 15:12' },
        { id: '9', name: '测试数据9', creator: 'system', time: '2021-04-19 15:12' }
      ]
    }
  },
  computed: {
    filteredList() {
      if (!this.searchKeyword) {
        return this.userList
      }
      return this.userList.filter(item => 
        item.name.includes(this.searchKeyword) || 
        item.creator.includes(this.searchKeyword)
      )
    }
  },
  methods: {
	   scrolltolower() {
	         
	        },
    goBack() {
      uni.navigateBack()
    },
    handleSearch() {
      // 搜索逻辑已在computed中实现
    },
    addItem() {
      uni.navigateTo({
        url: '/pages/test/detail?action=add'
      })
    },
    editItem(item) {
      uni.navigateTo({
        url: `/pages/test/detail?action=edit&id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.add-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: #007AFF;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.container {
  padding: 20rpx;
  height: 100vh;
}
</style>